<template>
    <header id='head_top'>
        <slot name='logo'></slot>
        <slot name="search"></slot>
        <router-link :to="'/login'" v-if="signinUp" class="head_login">
            <span class="login_span">登录｜注册</span>
        </router-link>
        <section v-if="goBack" @click="$router.go(-1)" class="goback">
            <span>&lt;</span>
        </section>
        <section V-if="headTitle" class="headtitle ellipsis">
            <span>{{headTitle}}</span>
        </section> 
        <slot name="my"></slot>
        <slot name="changeCity"></slot>  <!-- 城市搜索页面 -->
        <slot name="changeLogin"></slot>  <!-- 登录页面 -->
    </header>
</template>

<script>
   
   export default{
       name:'headTop',
       data(){
           return{

           }
       },
       props:['signinUp','goBack','headTitle']
   }

</script>

<style lang="scss" scoped>
   @import 'src/style/mixin';
   #head_top{
      background-color: $blue;
      position: fixed;
      z-index: 100;
      left:0;
      top:0;
      @include wh(100%, 1.95rem);
   }
   .head_login{
       right:0.55rem;
       @include sc(0.65rem,#fff);
       @include ct;
       .login_span{
           color:#fff;
       }
   }
   .goback{
        width: 1rem;
        height: 1rem;
        padding:5px;
        span{
            color:#fff;
        }
    }
    .headtitle{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        span{
            color: #fff;
            font-size: .875rem;
            text-align: center;
            font-weight: bold;
        }
    }
</style>
